<script setup lang="ts" name="GoodsHot">
    import { IResponse } from '@/types/data'
    import { CategoryGoods } from '@/types/good'
    import request from '@/utils/request'
    import GoodsItem from '@/views/category/components/goods-item.vue'
    import { onMounted, PropType, ref } from 'vue'
    import { useRoute } from 'vue-router'
    const props = defineProps({
        type: {
            type: Number as PropType<1 | 2 | 3>,
            default: 1,
        },
    })
    const titleObj = {
        1: '24小时热销榜',
        2: '周热销榜',
        3: '总热销榜',
    }
    const route = useRoute()
    // #1 获取 goodsId
    const goodsId = route.params.id as string
    // #2 准备装数据的数组 list
    const list = ref<CategoryGoods[]>([])
    // #3 onMounted 的时候把数据放进数组 list
    onMounted(async () => {
        const res = await request.get<IResponse<CategoryGoods[]>>('/goods/hot', {
            params: {
                id: goodsId,
                type: props.type,
            },
        })
        list.value = res.data.result
    })
</script>

<template>
    <div class="goods-hot">
        <!-- #3 -->
        <h3>{{ titleObj[props.type] }}</h3>
        <div class="goods-list">
            <GoodsItem v-for="(item, index) in list" :key="index" :goods="item" />
        </div>
    </div>
</template>

<style scoped lang="less">
    .goods-hot {
        background-color: #fff;
        margin-bottom: 20px;
        h3 {
            height: 70px;
            background: @helpColor;
            color: #fff;
            font-size: 18px;
            line-height: 70px;
            padding-left: 25px;
            margin-bottom: 10px;
            font-weight: normal;
        }
        .goods-list {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
    }
</style>